<template>
  <div class="home-container">
    <div class="welcome-card card">
      <h1 class="welcome-title">欢迎使用记忆笔记</h1>
      <p class="welcome-subtitle">一个简洁、高效的本地笔记应用</p>
      <div class="welcome-stats">
        <div class="stat-item">
          <span class="stat-number">{{ memoCount }}</span>
          <span class="stat-label">笔记</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">{{ folderCount }}</span>
          <span class="stat-label">文件夹</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">{{ diaryCount }}</span>
          <span class="stat-label">日记</span>
        </div>
        <div class="stat-item">
          <span class="stat-number">{{ collectCount }}</span>
          <span class="stat-label">收藏</span>
        </div>
      </div>
    </div>

    <div class="features-grid">
      <div class="feature-card card" @click="goToMemo">
        <div class="feature-icon iconfont icon-notes"></div>
        <h3 class="feature-title">记事本</h3>
        <p class="feature-desc">创建和管理您的日常笔记</p>
      </div>

      <div class="feature-card card" @click="goToDiary">
        <div class="feature-icon iconfont icon-rili"></div>
        <h3 class="feature-title">日历本</h3>
        <p class="feature-desc">按日期查看和管理笔记</p>
      </div>

      <div class="feature-card card" @click="goToCollect">
        <div class="feature-icon iconfont icon-shoucang"></div>
        <h3 class="feature-title">收藏</h3>
        <p class="feature-desc">查看您收藏的重要内容</p>
      </div>

      <div class="feature-card card" @click="goToSetting">
        <div class="feature-icon iconfont icon-shezhi"></div>
        <h3 class="feature-title">设置</h3>
        <p class="feature-desc">管理应用设置和资源</p>
      </div>
    </div>

    <div class="recent-section card">
      <div class="section-header">
        <h2 class="section-title">最近笔记</h2>
        <a-button type="primary" @click="createNewNote" class="new-note-btn">
          <i class="iconfont icon-add"></i> 新建笔记
        </a-button>
      </div>
      <div class="recent-list" v-if="recentNotes.length > 0">
        <div v-for="note in recentNotes" :key="note.id" class="recent-item" @click="openNote(note)">
          <div class="note-title">{{ note.title }}</div>
          <div class="note-time">{{ formatTime(note.updated) }}</div>
        </div>
      </div>
      <div class="no-notes" v-else>
        <p>暂无笔记，点击按钮创建您的第一篇笔记</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onActivated } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { formatTime } from "@/renderer/utils/helper";

const router = useRouter();

// 数据统计
const memoCount = ref(0);
const folderCount = ref(0);
const diaryCount = ref(0);
const collectCount = ref(0);

// 最近笔记
const recentNotes = ref<any[]>([]);

// 格式化时间
// const formatTimeDisplay = (time: number) => {
//   return formatTime(time);
// };

// 导航到不同页面
const goToMemo = () => {
  router.push("/WindowMain/Memo");
};

const goToDiary = () => {
  router.push("/WindowMain/Diary");
};

const goToCollect = () => {
  router.push("/WindowMain/Collect");
};

const goToSetting = () => {
  router.push("/WindowMain/Setting/Resource");
};

// 创建新笔记
const createNewNote = async () => {
  try {
    router.push("/WindowMain/Memo");
    // 这里应该通知 Memo 页面打开新建的笔记，但需要修改 Memo 页面代码才能实现
    // message.success("创建新笔记成功");
  } catch (error) {
    message.error("创建笔记失败");
  }
};

// 打开笔记
const openNote = (note: any) => {
  router.push({
    path: '/WindowMain/Memo',
    query: {
      from: 'home',
      noteId: note.id
    }
  });
};

// 加载统计数据
const loadStats = async () => {
  try {
    // 请求Express提供的/api/memorys接口并打印结果
    try {
      const response = await fetch('http://localhost:32068/api/memorys');
      const res = await response.json();
      if (res.code === 200) {
        // 根据 isFolder 字段区分笔记和文件夹
        const notes = res.data.filter((item: any) => !item.isFolder);
        const folders = res.data.filter((item: any) => item.isFolder);
        memoCount.value = notes.length;
        folderCount.value = folders.length;
        const collects = notes.filter((note: any) => note.isStar);
        collectCount.value = collects.length;

        // 获取最近的5条笔记
        recentNotes.value = [...notes]
          .sort((a, b) => b.updated - a.updated)
          .slice(0, 5);

      }
    } catch (error) {
      console.error('请求/api/memorys接口失败:', error);
    }

    // 使用Express API获取日历数据
    try {
      const response = await fetch('http://localhost:32068/api/diarys');
      const data = await response.json();
      console.log('Diarys API Response:', data);
      diaryCount.value = data.data ? data.data.length : 0;
    } catch (error) {
      console.error('请求/api/diarys接口失败:', error);
    }


  } catch (error) {
    console.error("加载统计数据失败:", error);
  }
};

onMounted(() => {
  loadStats();
});

onActivated(() => {
  loadStats();
});
</script>

<style scoped>
.home-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.welcome-card {
  text-align: center;
  padding: 40px 20px;
  margin-bottom: 20px;
}

.welcome-title {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.welcome-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: var(--primary-color);
}

.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 5px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.feature-card {
  text-align: center;
  padding: 30px 20px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border-color);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: var(--primary-color);
}

.feature-icon {
  font-size: 40px;
  color: var(--primary-color);
  margin-bottom: 15px;
}

.feature-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.feature-desc {
  font-size: 14px;
  color: var(--text-secondary);
}

.recent-section {
  padding: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  color: var(--text-primary);
}

.new-note-btn {
  display: flex;
  align-items: center;
  gap: 5px;
}

.recent-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recent-item {
  padding: 15px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid var(--border-color);
}

.recent-item:hover {
  background-color: var(--primary-extra-light-color);
  border-color: var(--primary-color);
}

.note-title {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.note-time {
  font-size: 12px;
  color: var(--text-secondary);
}

.no-notes {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}

@media (max-width: 768px) {
  .welcome-stats {
    gap: 20px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
</style>